<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js" type="text/javascript"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript"></script>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>
		<div id="app">
			{{ counter }}
			<p>Use matchs:{{rawHtml}}</p>
			<p v-html="rawHtml"></p>
			<p v-bind:class="color">绑定属性</p>
			<p>{{number + 1}}</p>
			<p>{{ok?"YES":"NO"}}</p>
			<p>{{ message.split('').reverse().join('') }}</p>
			<button v-on:click="reverseMessage">反转消息</button>
			<input v-model="message" />
			<br />

			<p>Original message: "{{ message }}"</p>
			<p>Computed reversed message: "{{ reversedMessage }}"</p>

			<div>全名：“{{fullName}}”</div>

			<span v-bind:title="title">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
			<p v-if="seen">
				现在你看到我了
			</p>

			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
			<ol>
				<todo-item></todo-item>
			</ol>
			<ol>
				<newli-item v-for="item in itemlist" v-bind:item="item" v-bind:key="item.id"></newli-item>
			</ol>

			<a v-bind:href="url">...</a>
			<button v-mydirective="'red'">变红</button>
			<button v-mydirective="'blue'">变蓝</button>

			<div v-on:click="click1">
				<div v-on:click.stop="click2">
					点击
				</div>
			</div>
			<!-- :是v-bind,@是v-on -->

		</div>




		<script type="text/javascript">
			// const App = {
			// 	data() {
			// 		return {
			// 			counter: 3
			// 		}
			// 	}
			// };
			// Vue.createApp(App).mount('#app');

			// export default {
			//   data () {
			//     return { attributeName: "href" }
			//   }
			// }


			var model = {
				counter: 0,
				rawHtml: '<span style="color: #ff0000;">这是红色文字</span>',
				url: 'https://v2.cn.vuejs.org/v2/guide/syntax.html#%E5%8E%9F%E5%A7%8B-HTML',
				color: "red",
				firstName: "Tom",
				lastName: "John",
				number: 7,
				ok: true,
				message: "hello every one",
				title: '页面加载于 ' + new Date().toLocaleString(),
				seen: true,
				todos: [{
						id: 0,
						text: '学习 JavaScript'
					},
					{
						id: 1,
						text: '学习 Vue'
					},
					{
						id: 2,
						text: '整个牛项目'
					}
				],
				itemlist: [{
					text: '苹果'
				}, {
					text: '香蕉'
				}, {
					text: '百香果'
				}]
			}
			Vue.component('todo-item', {
				template: '<li>这是代办事项</li>'
			})
			Vue.component('newli-item', {
				props: ['item'],
				template: '<li>{{item.text}}</li>'
			})
			Vue.directive('mydirective', {
				bind: function(el, binding) {
					el.style.color = binding.value; // 设置元素的颜色为指令参数的值
				}
			});
			var vm = new Vue({
				el: '#app',
				data: model,
				computed: {
					reversedMessage: function() {
						// `this` 指向 vm 实例
						return this.message.split('').reverse().join('') + Date.now()
					},
					fullName: {
						//计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
						get: function() {
							return this.firstName + ' ' + this.lastName
						},
						set: function(newValue) {
							var names = newValue.split(' ')
							this.firstName = names[0]
							this.lastName = names[names.length - 1]
						}
					}
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split("").reverse().join("")
					},
					click1: function() {
						console.log("点击1")
					},
					click2: function() {
						console.log("点击2")
					}
				},
				beforeCreate: function() {
					console.log('beforeCreate')
				},
				created: function() {
					console.log('created')
				},
				beforeMount: function() {
					console.log('beforeMount')
				},
				mounted: function() {
					console.log('mounted')
				},
				beforeUpdate: function() {

				}
			})
			vm.counter = 5
			vm.$watch('counter', function(newVal, oldVal) {
				console.log(newVal, oldVal)
			})
			vm.counter = 8
		</script>
		<style type="text/css">
			.red {
				color: red;
			}
		</style>
	</body>
</html>